﻿<!DOCTYPE html>
<html>
<head>
    <title>KittenLayer - Leaflet</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
    <style type="text/css">
        body { padding: 0; margin: 0; }
        html, body, #map { height: 100%;}
    </style>
</head>
<body>
    <div id='map'></div>
</body>
</html>

<script type="text/javascript">
    // map
    var map = L.map('map').setView([39.915, 116.404], 15);
    

    //var tiles = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    //    maxZoom: 18,
    //    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors,  Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    //    id: 'mapbox/streets-v11',
    //    tileSize: 512,
    //    zoomOffset: -1
    //}).addTo(map);
    var tiles = L.tileLayer('https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
        maxZoom: 18,
        attribution: 'Map data &copy; autonavi Imagery © <a href="https://www.gaode.com/">Gaode</a>',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(map);


    // custom tile layer
    L.TileLayer.T = L.TileLayer.extend({
        getTileUrl: function (coords) {
            return 'tiles/' + coords.z + '/' + coords.x + '_' + coords.y + '.png';
        }
    });
    map.addLayer(new L.TileLayer.T());
</script>
